<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>works</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/icons.css">

    <script type="text/javascript" src="js/jquery.bxslider.js"></script>
    <link href="css/jquery.bxslider.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
        $(document).ready(function(){

            $('.slider7').bxSlider({

                slideWidth: 400,

                infiniteLoop: false,

                hideControlOnEnd: true,

                slideMargin: 10,
                pager: false

            });

        });
    </script>

    <!--region 导航栏消失-->
    <script>
        $(document).scroll(function () {
            if($(document).scrollTop()===0) {
                $("#header").removeClass("headroom--not-top headroom--unpinned");
                $("#header").addClass("headroom--pinned headroom--top");
            } else {
                $("#header").removeClass("headroom--pinned headroom--top");
                $("#header").addClass("headroom--not-top headroom--unpinned");
            }
            console.log($(document).scrollTop());
        })
    </script>
    <!--endregion-->
</head>
<style>
    .first-margin{
        margin-left: 20px;
        margin-top: 20px;
    }
</style>
<body>
<header id="header" class="headroom headroom--not-bottom headroom--pinned headroom--top" onscroll="myFunction()">
    <div id="header--bg" onscroll="myFunction()">
        <div class="d-flex align-items-center justify-content-end">

            <div id="gnav">
                <nav>
                    <ul>
                        <li><a href="./brand.html"><span>Brand</span></a></li>
                        <li><a href="./portfolio.html"><span>Portfolio</span></a></li>
                        <li><a href="./hometown.html"><span>Hometown</span></a></li>
                        <li><a href="./about.html"><span>About</span></a></li>
                        <li><a href="./contact.html"><span>Contact</span></a></li>
                        <li><a href="./index.html#portfolio"><img src="./images/logo.svg"  width="20%" style="position: relative;top: -10px;left: 20px"/></a></li>
                    </ul>
                </nav>
            </div>

        </div>
    </div>
</header>
<main id="index">
    <div id="main--image" class="main--works active">
        <div class="container">
            <h2 id="main--text">Works</h2>
        </div>
    </div>

    <section id="sec01" style="margin-top: 100px">
        <div class="content-inner-lg-y">
            <div class="container">
                <div class="row justify-content-around" style="align-items: center">
                    <div style="flex: 0 0 auto;">
                        <div>
                            <span><img class="first-margin" src="images/works/221.png"/><img class="first-margin" src="images/works/222.png"/></span>
                        </div>
                        <div>
                            <span><img class="first-margin" src="images/works/231.png"/><img class="first-margin" src="images/works/232.png"/></span>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <h3 class="title--secondary mb20 scrt-to-left">First</h3>
                        <p>大一上半学期</p>
                        <p>第一次画完了一整本B5本</p>
                        <p>学习了AI,PS,Su等软件... ...</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="sec02" style="margin-top: 100px">
        <div class="content-inner-lg-y">
            <div class="container">
                <div class="row justify-content-around">
                    <div class="col-lg-3">
                        <h3 class="title--secondary mb20 scrt-to-left">Second</h3>
                        <p>大一下半学期</p>
                        <p>彩构，立构，摄影</p>
                    </div>
                    <div class="row justify-content-around" style="flex: 0 0 70%;">
                        <img style="flex: 0 0 30%" src="images/works/241.png">
                        <img style="flex: 0 0 30%" src="images/works/242.png">
                        <div style="flex: 0 0 30%; flex-direction: column; display:flex; justify-content: space-between">
                            <img src="images/works/243.png"/>
                            <img src="images/works/244.png"/>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <section id="sec03" style="margin-top: 200px">
        <div class="content-inner-lg-y">
                <div class="row" style="justify-content: start; align-items: center">
                    <div class="col-7">
                        <div class="slider7">
                            <div class="slide"><img src="images/works/1.png" ></div>
                            <div class="slide"><img src="images/works/2.png" ></div>
                            <div class="slide"><img src="images/works/3.png" ></div>
                        </div>
                    </div>
                    <div style="flex: 0 0 30%">
                        <h3 class="title--secondary mb20 scrt-to-left">Third</h3>
                        <p>大二上半学期</p>
                        <p>刚分专业，视传要学的东西很多</p>
                        <p>作业也很多... ...</p>
                        <p>但能做出自己喜欢的作品还是很开心。<p>
                    </div>
                </div>
            </div>
    </section>

    <section id="sec04" style="margin-top: 200px; background-color:rgba(0,0,0,0.1);">
        <div class="content-inner-lg-y">
            <div class="container">
                <div style="display: flex;flex-direction: column;align-items: flex-start">
                    <div style="display: flex;justify-content: space-between">
                        <img src="images/works/261.png">
                        <div style="flex: 0 0 30%">
                            <h3 class="title--secondary mb20 scrt-to-left">Fourth</h3>
                            <p>大二下半学期</p>
                            <p>疫情突然,</p>
                            <p>终于体验到了躺在床上上课的感觉。</p>
                            <p>我真的太喜欢画美少女了。<p>
                        </div>
                    </div>
                    <img src="images/works/262.png" style="margin-top: 20px"/>
                    <img src="images/works/263.png" style="margin-top: 20px"/>
                </div>
            </div>
        </div>
    </section>

</main>


<footer id="footer" style="margin-top: 300px">
    <div class="container pos-r">
        <div class="ft--body">
            <div class="row justify-content-between">
                <div class="col-lg-5 order-lg-2">
                    <div id="foot-contact" class="row flex-column justify-content-around align-items-start" style="position: relative;top: -200px;padding: 50px">
                        <h3 class="mb40 z-index-99">Contact</h3>
                        <p class="mb30 z-index-99">著名奶茶鉴定家。<br>国家精准扶贫项目重点帮扶对象。</p>
                        <p class="z-index-99"><span>TEL:</span>139 6550 1155</p>
                        <p class="z-index-99"><span>EMAIL:</span>806632876@qq.com</p>
                    </div>
                </div>
                <div class="col-lg-7 order-lg-1 row justify-content-around align-items-start">
                    <img class="col-2" src="./images/logo-foot.svg" alt="Invincible Hair MADA">
                    <div class="d-none d-lg-block col-8">
                        <div class="row mb60">
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/concept/">Brand</a></li>
                                    <li><a href="/About/">About</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/recruit/">Portfolio</a></li>
                                    <li><a href="/contact/">Contact</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/news/">Hometown</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>
</html>